<template>
  <published-list title="二手车" :visibleTabs="false" :otherListMethod="loadListMethod" ref="list" :isAllList="true">
    <!-- 这里都是筛选栏的内容 -->
    <div class="filters com-onMask" slot="bar">
      <div class="filter-item" :class="{ selected: selected === 'manuf' }" @click="openSelect('manuf')">
        <span>{{ manuf === '' ? '厂商' : manufData.filter(val => manuf === val.id)[0].name }}</span>
        <x-icon type="ios-arrow-down" size="14" class="arrow"></x-icon>
      </div>

      <div class="filter-item" :class="{ selected: selected === 'series' }" @click="openSelect('series')">
        <span>{{ series === '' ? '型号' : seriesCache[manuf].filter(val => series === val.id)[0].name }}</span>
        <x-icon type="ios-arrow-down" size="14" class="arrow"></x-icon>
      </div>
      
      <div class="filter-item" :class="{ selected: selected === 'transfer' }" @click="openSelect('transfer')">
        <span>{{ transfer === '' ? '' : (transfer ? '有' : '无') }}包过户</span>
        <x-icon type="ios-arrow-down" size="14" class="arrow"></x-icon>
      </div>

      <div class="options" v-if="visibleOptions && showOptions">
        <div class="option" @click="setFilterItem(selected, '')"
          :class="{ selected: '' === $data[selected] }"
        >不设置</div>
        <div class="option" v-for="(item, index) in showOptions" :key="index"
          :class="{ selected: item.id === $data[selected] }"
          @click="setFilterItem(selected, item.id)"
        >{{ item.name }}</div>
      </div>
    </div>
  </published-list>
</template>

<script>
import { Icon } from 'vux'
import PublishedList from '@v/publishedList/PublishedList'

export default {
  components: {
    Icon,
    PublishedList
  },

  data (){
    return {
      selected: '',   // 当前打开的筛选器：厂商 or 型号 or 包过户
      manuf: '',      // 选中的厂商
      series: '',     // 选中的型号
      transfer: '',   // 是否包过户

      manufData: null,

      seriesCache: {},
      visibleOptions: false
    }
  },

  beforeRouteLeave (to, from, next){
    this.$alert.mask.hide()
    next()
  },

  mounted (){
    this.getManufData()
  },

  computed: {
    // 应显示的列表
    showOptions (){
      var transfer = [
        { name: '是', id: 1 }, 
        { name: '否', id: 0 }
      ]

      return {
        manuf: this.manufData,
        series: this.seriesCache[this.manuf],
        transfer
      }[this.selected]
    },

  },

  methods: {
    // 加载品牌
    getManufData (){
      _api('carManuf/getListByCon', { is_paginate: 0 }).then(data => this.manufData = data)
    },

    // 加载系列
    getSeriesData (){
      _api('carSeries/getListByCon', {
        car_manuf_id: this.manuf,
        is_paginate: 0
      })
      .then(data => this.seriesCache[this.manuf] = data)
    },

    // 设置筛选项流程：打开选择器 =>  打开遮罩 => 用户点击设置筛选项 => 关闭遮罩 => 重加载 
    // 打开选择器
    openSelect (name){
      if(name === 'series' && !this.manuf){
        this.$alert.toast('请先选择厂商')
        return
      }
      this.selected = name
      this.visibleOptions = true
      this.$alert.mask.show(() =>{
        this.visibleOptions = false
        this.selected = ''
      })
    },

    // 设置筛选项
    setFilterItem (name, id){
      this.$data[name] = id
      this.visibleOptions = false
      this.$alert.mask.hide()
      this.selected = ''

      if(name === 'manuf'){
        if(id === '') this.series = ''
        this.getSeriesData()
      }
      
      this.$refs.list.reload()
    },

    // 重写调用接口的方法，传给PublishList
    loadListMethod (type, page, isSwipeDownRefresh){
      return _api('usedCar/getListByCon', {
        level: '0,2,3,5',
        is_show_all_with_me: 1,
        user_id: localStorage.getItem('user_id'),
        page: isSwipeDownRefresh ? 1 : page,
        ...(this.manuf ? { car_manuf_id: this.manuf } : {}),
        ...(this.series ? { car_series_id: this.series } : {}),
        ...(this.transfer !== '' ? { is_transfer: this.transfer ? 1 : 0 } : {})
      })
    }
  },

  
}
</script>

<style lang="less" scoped>
@import '~@sty/allList.less';
</style>